<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>变态贪吃蛇</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
		<meta content="Coderthemes" name="author" />
		<!--通知浏览器打开极速模式-->
		<meta name="renderer" content="webkit">
		<!--如果只有IE内核,默认用最高版本-->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

		<!-- App favicon -->
		<link rel="shortcut icon" href="assets/images/favicon.ico">

		<!-- App css -->
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
		<!--Font Awesome图标-->
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" media="all">
		<!--Highdmin模板-->
		<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
		<!--通用样式-->
		<link rel="stylesheet" href="assets/css/common.css" />

		<!--[if lt IE 9]>
     		<script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  		<![endif]-->

		<!-- jQuery  -->
		<script src="//cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="assets/css/tcs.css" />
	</head>

	<body>

		<!-- Navigation Bar-->
		<header id="topnav">

		</header>
		<script>
			//引入头部
			//$('#topnav').load('top.html');
			$.ajax({
				type: 'get',
				url: 'top.html',
				async: false,
				success: function(top) {
					$('#topnav').append(top);
				}
			});
		</script>
		
		<!--bootstrap js-->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
		<!--jquery.slimscroll.js-->
		<script src="https://cdn.staticfile.org/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
		<!-- Highdmin模板 js -->
		<script src="assets/js/jquery.app.js"></script>


		<div id="app" style="margin-top: 10%;" class="card-box">
			<h1 style="text-align: center;"><span style="color: deepskyblue;">贪吃蛇</span></h1>
			<div v-if="!startEat" style="margin: 30px 40%;">
				设置行数:
				<input type="number" class="form-control" v-model="x" /><br />
				设置列数:
				<input type="number" class="form-control" v-model="y" />
				<br />
				<select v-model="velocity" class="form-control" style="height: 38px;">
					<option v-for="(vel, index) in velocitys" :value="index">{{vel.name}}</option>
				</select>
				<br />
				<div style="text-align: center;">
					<button @click="start" class="btn">开始</button>
				</div>

			</div>
			<div v-if="startEat" style="text-align: center;margin-top: 30px;">
				<div  style="font-size: 24px;color: #20C997;">
					<span>剩余复活币:<span style="color: #EFA2A9;">{{resurgence}}</span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<span>难度:<span style="color: #EFA2A9;">{{velocitys[velocity].name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<span>分数:<span style="color: #EFA2A9;">{{score}}</span>分</span>
				</div>
				<table id="appTable" align="center" cellspacing="0">
					<tr v-for="arr in tArray">
						<td v-for="trn in arr" :class="myClass[trn]"></td>
					</tr>
				</table>
				<font style="font-size: 20px;color: #20C997;">按方向键开始</font>
			</div>
		</div>
		<script src="assets/js/tcs.js"></script>
		<!-- end wrapper -->

		<!-- bottom-->
		<div id="bottom"></div>
		<script>
			//引入底部
			$('#bottom').load('bottom.html');
		</script>
	</body>

</html>
